<template>
  <div>
    <el-menu :collapse="isCollapse" unique-opened="true" router>
      <template v-for="(item, i) in treeData">
        <el-submenu
          v-if="item.type === '0' && item.children && item.children.length > 0"
        >
          <template slot="title">
            <i :class="item.icon"></i>
            <span>{{ item.name }}</span>
          </template>
          <TreeMenu :treeData="item.children" />
        </el-submenu>
        <el-menu-item v-else-if="item.type === '1'" :index="item.path">
          <template slot="title">
            <i :class="item.icon"></i>
            <span>{{ item.name }}</span>
          </template>
        </el-menu-item>
      </template>
    </el-menu>
  </div>
</template>

<script>
export default {
  name: "TreeMenu",
  props: {
    treeData: Array,
    isCollapse: Boolean,
  },
  data() {
    return {};
  },
};
</script>

<style scoped lang="less">
.el-submenu .el-menu-item {
  min-width: 100%;
}
</style>